#{extends 'overlay.html' /}
<script type="text/javascript" src="@{'/public/javascripts/jquery.autocomplete.js/'}"></script>


<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/tipsy.css'}" />
<script type="text/javascript" src="@{'/public/javascripts/jquery.tipsy.js'}" charset="utf-8" ></script>
<script type="text/javascript">
function techliveValid()
{
	var message="<font color=\"red\"><ul>";
	var flag=false;
	var description = $('#object_description').val();
	var notes = $('#object_notes').val();
	if(description.length ==0)
	{
		flag=true;
		message+="<li>Description is required</li>";
	}


	if(flag == true)
	{
		$('#errors').empty();
		message+="</ul></font>";
		$('#errors').append(message);
		return false;
	}
	else
	{
		return true;
	}
	return false;
}


function setDesc()
{
	for(var i=0; i< $('#object_productRole').length +1;i++)
	{
	if(document.getElementById('object_productRole').options[i].selected== true)
		{
			document.getElementById('descRole').options[i].selected=true;
		}
		else
		{
			document.getElementById('descRole').options[i].selected=false;
		}
	}
}

function setRole()
{
	for(var i=0; i< $('#object_productRole').length +1;i++)
	{
		if(document.getElementById('descRole').options[i].selected== true)
		{
			document.getElementById('object_productRole').options[i].selected=true;
		}
		else
		{
			document.getElementById('object_productRole').options[i].selected=false;
		}
	}
	
}
/* The Tips jQuery code */
$('#object_componentID').tipsy({fade: true, gravity: 'w'});
$('#object_description').tipsy({fade: true, gravity: 'w'});
$('#object_notes').tipsy({fade: true, gravity: 'w'});
$('#object_productRole').tipsy({fade: true, gravity: 'w', html:true });
$('#object_priority').tipsy({fade: true, gravity: 'w', html:true });
$('#object_dependentStories').tipsy({fade: true, gravity: 'w', html:true });
</script>

<div class="popup">

<div id="crudShow" class="${type.name}">
	<!-- 
	<h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>
	 -->
	 <div class="popup-header">
	 <h3>View Story</h3>
	 </div>
	<div class="popup-body">
	<div id="errors" name="errors">
	</div>
	<div class="objectForm">
	<form id="galal" onSubmit="return techliveValid()" action="@{save(object.id)}" method="POST" accept-charset="utf-8" enctype="multipart/form-data" >
	#{crud.form fields:['componentID','productRole','description', 'priority', 'notes', 'dependentStories']}
		
		#{crud.custom 'componentID'}
			<label for="object_componentID">Story's Component*</label>
					<select id="object_componentID" name="object.componentID@id" title="The Component" onchange="setDesc();">
								#{list items:project.components ,as :'component'}
									<option value="${component.id}" #{if component.id == object.componentID.id}selected#{/if}>${component.name}</option>
								#{/list}		
					</select>
		    <span class="crudHelp"></span>
		#{/crud.custom}
		
		#{crud.custom 'description' }
		<label for="object_description">Description	</label>
		
		#{if object.productRole==null}
		<textarea id="example"  name="object.description" ROWS="4" COLS="60" onclick="f();">${object.description}</textarea>
		#{/if}
		#{else}
		<textarea id="example"  name="object.description" ROWS="4" COLS="60" onclick="f();">As a ${object.productRole.name}, ${object.description}</textarea>
		#{/else}
		
		    <span class="crudHelp">*</span>
		  <div style="display:none" class="d">Ex: As a/an product role, description</div>
		    <span class="error"></span>
		    </div>
		
		#{/crud.custom}
		
			#{crud.custom 'productRole'}
					<label for="object_productRole">Product Role</label>
		
						<select id="object_productRole" name="object.productRole@id" title = "The product role to be associated with the story. Example : The famous cashier." onchange="setDesc();">
								#{list items:project.productRoles ,as :'productRole'}
									#{if productRole} <option value="${productRole.id}" #{if object.productRole}#{if productRole.id == object.productRole.id}selected#{/if}#{/if}>${productRole.name}</option>#{/if}
								#{/list}
						</select>
		    <span class="crudHelp"></span>
		#{/crud.custom}
		
		#{crud.custom 'notes'}
		<label for="object_notes">
			Notes
		</label>
		<textarea id="object_notes" cols="48" rows="5" class="" name="object.notes" title="For your own use. Enter some notes that you do not want to forget or so.">${object.notes}</textarea>
		#{/crud.custom}
		
	}
		
		#{crud.custom 'priority'}
				<label for="object_priority">priority</label>
				<select id="object_priority" name="object.priority" title = "The priority of the story. Example : Medium">
					#{list items:project.priorities ,as :'priority'}
									#{if priority}<option value="${priority.id}" #{if priority.id == object.priority}selected#{/if}>${priority.title}</option>#{/if}
					#{/list}
				</select>
				<span class="crudHelp"></span>
		#{/crud.custom}
		
		#{crud.custom 'dependentStories'}
				<label for="object_dependentStories">Dependent Stories</label>
				<input type="hidden" name="object.dependentStories@id" value="" />
				<select id="object_dependentStories" name="object.dependentStories@id" multiple="yes" title = "The stories that this story depends on.">
							#{list items:stories ,as :'story'}
									#{if story.deleted == false}
										#{if object.id != story.id}
										<option value="${story.id}" #{list items:object.dependentStories ,as :'story2'}#{if story.id == story2.id}selected#{/if}#{/list}>${story.description}</option>
										#{/if}
									#{/if}
							#{/list}		
				</select>
				<br><i>To unselect a story, press CTRL and click on the selected story.</i>
    			<span class="crudHelp"></span>
		#{/crud.custom}
		#{/crud.form}
		#{if editable == false}
			<p class="crudButtons"><b><font color="red">The story can not be deleted. Possible Reasons : Story in sprint or another story depends on it.</font></b></p>
		#{/if}
		#{if editable}
			<p class="crudButtons">
			#{if connected.in(project).can('editStory')}
				<input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
			<!-- 
				<input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
			 -->
			#{/if}
			</p>
		#{/if}
		#{if editable == false}
			#{if editable2 == false}
			<p class="crudButtons">
			#{if connected.in(project).can('editStory')}
				<input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
			<!-- 
				<input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
			 -->
			 #{/if}
			 #{/if}
			 #{else}
			 	<b><font color="red">The story can not be edited. Possible Reasons : Story in sprint.</font></b>
			 #{/else}
			</p>
		#{/if}
	</form>
	</div>
	
	#{if editable}
		#{if connected.in(project).can('deleteStory')}
			<form action="@{delete(object.id)}?x-http-method-override=DELETE" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" onSubmit="return confirm('${message}');">	
				<p class="crudDelete">
					<input type="submit" value="&{'crud.delete', type.modelName}" />
				</p>
			</form>
		#{/if}
	#{/if}
	<a href="#" onclick="$.closePopupLayer('editForm')">Exit Story View</a>
</div>
</div>
</div>

<script>
	var data='${productRoles}'.split("-");
	$("#example").autocomplete(data);
	
	function f()
	{
		$('.d').css('display','inline-block');
	}
	
	function product_role(id)
	{
		$.post('/Storys/addProductRole' ,			
			{projectID:id,						
			description:$("#example").val()});
	}
</script>